<template>
  <div class='headerC'>
    <div class="headerC-all animate__fadeInLeft animate__animated">
      <ul class="headerC-all-ul">
        <li>
 <img src="http://wjtouxiang.oss-cn-beijing.aliyuncs.com/UserAvatar/9ac1c671-ca7b-4c46-9e56-c4c11cda9d9b.jpeg" @click="pathRouter('index')" alt="" class="logo">         
        </li>
        <li v-for="item in navlist" :key="item.id" :class="{
          'navlist-li-ok': true
        }"
        @click="pathRouter(item.router)"
        >
          {{ item.name }}
        </li>
        <li class="head-all" v-if="iflogin">
          <img :src="usermes['avatar']" @click="pathRouter('my')">
          <!-- 下拉菜单 -->
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ usermes['nickname'] }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item>草稿</el-dropdown-item>
                <el-dropdown-item divided @click="backLogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </li>
        <li v-else>
          <el-button size="mini" @click="pathlogin">请登录</el-button>
        </li>
        <li>
          <el-input size="small" clearable v-model="inputvalue" placeholder="全站搜索" prefix-icon="el-icon-search"></el-input>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { backLoginAPI, getUserByIdAPI } from '../../api/userAPI'
import router from '../../router'
import { error1, succ2 } from '../../tool/ElMessageAny'
import { ifloginuser } from '../../tool/ifany'

import UseLocalStorage from '../../tool/UseLocalStorage'
import { Iloginmsg } from '../../views/login/esType'


// 接口
interface Iqureymsg {
  userID: number;
  type: string;
}
interface Inavlist {
  id: number;
  name: string;
  router: string;
}
// type
type navlistType = Inavlist[]
type pathRouterT = (router: string) => {}

export default defineComponent({
  name: 'hearder',
  setup () {
    // 本地存储
    const { localStorageId } = UseLocalStorage()
    // 判断是否登录
    const iflogin = ref<Boolean>(localStorageId === null ? false : true)
    // 导航的for
    const navlist: navlistType = reactive([
        {
          id: 0,
          name: '首页',
          router: 'index'
        },
        {
          id: 1,
          name: '推荐',
          router: 'recommend'
        },
        {
          id: 2,
          name: '写文章',
          router: 'write'
        },
        {
          id: 3,
          name: '我的',
          router: 'my'
        },
        {
          id: 4,
          name: '反馈',
          router: 'feedback'
        }
      ])
    // input绑定
    const inputvalue = ref<string>('')
    // router信息
    const routername = ref(useRoute().name)
    const $router = useRouter()
    // 跳转路由参数对象
    const qureymsg= reactive<Iqureymsg>({
      userID: localStorageId,
      type: 'blog'
    })
    // 跳转路由
    const pathRouter = (router: string): void => {
      if(router === 'my') {
        setTimeout(() => window.location.reload(), 50)
      }
      $router.push({
        name: router,
        query: qureymsg
      })
    }
    const pathlogin = () => {
      $router.push('/login')
    }
    // 退出登录
    const backLogin = async () => {
      try {
        const res = await backLoginAPI()
        window.localStorage.removeItem('user')
        succ2('退出登录成功')
        router.push({
          name: 'login'
        })
      } catch {
        error1('服务器出错')
      }
    }
    // 获取用户信息
    let usermes = ref<Iloginmsg>({
      username: '',
      password: ''
    })
    const getusermes = async () => {
      if(!ifloginuser()) {
        return
      }
      try {
        const res = await getUserByIdAPI(localStorageId)
        if(res.data.code === 200) {
          usermes.value = res.data.data     
        }
      } catch {
        error1('服务器异常,获取用户信息失败')
      }
    }
    
    onMounted(() => {
      getusermes()
    })
    return {
      navlist,
      inputvalue,
      routername,
      pathRouter,
      iflogin,
      pathlogin,
      backLogin,
      usermes
    }
  }
})
</script>

<style lang='scss' scoped>
.headerC{
  height: 50px;
  background-color: #333333;
}

.headerC-all{
  color: #acacac;
  min-width: 1290px;
}

.headerC-all-ul{
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
  li{
    user-select: none;
    cursor: pointer;
  }

  .head-all{
    display: flex;
    align-items: center;
    gap: 20px;
    img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid #fff;
      
    }
  }
}
.el-dropdown-link{
  color: #fff;
}


// 选中颜色
.navlist-li-ok{
  color: #fff;
}
// logo
.logo{
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
</style>
